<template>
  <div class="list-search-page">
    <div class="simple-search" v-if="cols&&cols.length">
      <el-select v-model="searchField" placeholder="请选择" :style="{width:`${labelWidth||'120'}px`}">
        <el-option v-for="(item,index) in cols" :key="index" :label="item.title" :value="item.key"></el-option>
      </el-select>
      <el-input v-model="searchVal" :placeholder="searchFieldTips" suffix-icon="fa fa-search"
                clearable
                @input="changeSearch"/>
    </div>
  </div>
</template>

<script>

  export default {
    props: ['cols', 'label-width'],
    name: "list-search",
    data() {
      return {
        searchField: '',
        searchVal: '',
        searchFieldTips: ''
      }
    },
    mounted() {
      if (this.cols) {
        for (let i = 0; i < this.cols.length; i++) {
          let item = this.cols[i];
          let field = item.key.toLowerCase();
          if (field.indexOf('name') != -1) {
            this.searchField = item.key;
            this.searchFieldTips = item.title;
            break;
          }
        }
        if (!this.searchField) {
          let item = this.cols[0];
          this.searchField = item.key;
          this.searchFieldTips = item.title;
        }
      }
    },
    methods: {
      changeSearch() {
        let query = {};
        query[this.searchField] = this.searchVal;
        return this.$emit('search', query);
      }
    }
  }
</script>

<style lang="scss">
  .list-search-page {
    float: left;
    margin-left: 10px;

    .el-input {
      height: 32px;
      width: auto;
    }
  }
</style>
